<template>
    <div class="form">
        <div class="title">
            <span class="title-left">加盟需求填寫</span>
        </div>
        <div class="form-main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-form-item v-if="!isDetail" label="尋找類型" prop="brand_category_id">
                    <el-checkbox-group v-model="ruleForm.brand_category_id">
                        <el-checkbox v-for="(item,index) in type" :label="item.title" name="type" :key="index">{{item.title}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="手機" prop="m_phone">
                    <el-input v-model="ruleForm.m_phone" type="number"></el-input>
                </el-form-item>
                <el-form-item label="LINE ID" prop="">
                    <el-input v-model="ruleForm.line_id"></el-input>
                </el-form-item>
                <el-form-item label="微信 ID" prop="">
                    <el-input v-model="ruleForm.weichat_id"></el-input>
                </el-form-item>
                <el-form-item label="E-mail" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="預計地點" prop="location">
                    <el-radio-group v-model="loca" @change="changeType">
                        <el-radio label="0">尚未決定</el-radio>
                        <el-radio label="1">台灣地區</el-radio>
                        <el-radio label="2">海外地區</el-radio>
                    </el-radio-group>
                    <el-select style="display: block" v-if="loca==='1'" v-model="ruleForm.location">
                        <el-option :label="item.name" :value="item.name" v-for="(item,index) in area" :key="index"></el-option>
                    </el-select>
                    <el-input  v-if="loca==='2'"v-model="ruleForm.location"></el-input>
                </el-form-item>
                <el-form-item label="店面" prop="Shop_property">
                    <el-radio-group v-model="ruleForm.Shop_property">
                        <el-radio label="還在找店"></el-radio>
                        <el-radio label="已找到店"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="創業總預算" prop="budget">
                    <el-select v-model="ruleForm.budget" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.label"
                                :label="item.label"
                                :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="希望開店時間" prop="expected_time">
                    <el-radio-group v-model="ruleForm.expected_time">
                        <el-radio label="一個月"></el-radio>
                        <el-radio label="三個月"></el-radio>
                        <el-radio label="半年"></el-radio>
                        <el-radio label="一年"></el-radio>
                        <el-radio label="尚未確定"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="可聯絡時間" prop="contact_time">
                    <el-radio-group v-model="ruleForm.contact_time">
                        <el-radio label="早上9:00~12:00"></el-radio>
                        <el-radio label="下午12:00~18:00"></el-radio>
                        <el-radio label="晚上18:00~22:00"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="簡約說明" prop="">
                    <el-input type="textarea" v-model="ruleForm.desc" placeholder="填寫詳細需求說明，會更得到加盟總部的青睞哦！"></el-input>
                </el-form-item>
                <el-form-item label="驗證碼" prop="phrase">
                    <img  style="height: 40px;vertical-align: middle;cursor: pointer" :src="imgUrl1" alt="">

                    <el-input style="display: inline-block;width: 200px;margin: 10px;" v-model="ruleForm.phrase"/>
                    <a @click="refresh" href="javascript:;">看不清？點擊刷新</a>
                </el-form-item>
                <el-form-item label="" prop="open_info">
                    <el-checkbox v-model="ruleForm.open_info"  name="type">讓更多相關品牌了解我的需求，便可與我聯繫，達到更多選擇品牌的機會。</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">送出</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import qs from 'qs';
    export default {
        name: "ad",
        props:{
            brand_id:{
                type:String,
                default:() =>{
                    return ""
                 }
            },
          isDetail:{
            type:Boolean,
            default() {
                return false
            }
          }
        },
        data() {
        var checkPhone = (rule, value, callback) => {
            let mobilePatternTW = /^(\+886\s)?[0]{1}[9]{1}\d{8}$/;
            if(mobilePatternTW.test(value)){
                callback();
            }else{
                callback(new Error('請輸入正確的電話號碼'));
            }
        };
        var checkLoc = (rule, value, callback) => {
            if(this.loca==='') {
                callback(new Error('必填'));
            }else if(this.loca==="0"){
                callback();
            } else{
                if(this.ruleForm.location===''){
                    callback(new Error('必填'));
                }else{
                    callback();
                }
            }

        };
          var checkEmail=(rule, value, callback) => {
            var temp = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if(value===""){
              callback(new Error('必填'));
            }
            if(!temp.test(value)){
              callback(new Error('請輸入正確的郵箱'));
            }
            callback();
          };
            return {
                ruleForm: {
                    brand_category_id: [],
                    name: '',
                    m_phone: '',
                    line_id:'',
                    weichat_id:'',
                    email:'',
                    location:'',
                    Shop_property:'',
                    budget:"",
                    expected_time:'',
                    contact_time:'',
                    desc:'',
                    open_info:false,
                    phrase:"",
                },
                rules: {
                    brand_category_id: [
                        { required: true, message: '必填', trigger: 'change' },
                    ],
                    name: [
                        { required: true, message: '必填', trigger: 'blur' }
                    ],
                    m_phone: [
                        { required: true,message: '必填',validator:checkPhone, trigger: 'blur' }
                    ],
                  email: [
                        { required: true,validator:checkEmail, trigger: 'blur' }
                    ],
                    location: [
                        { required: true, validator:checkLoc,trigger: 'change' }
                    ],
                    Shop_property: [
                        { required: true,message: '必填', trigger: 'change' }
                    ],
                    budget: [
                        { required: true, message: '必填',trigger: 'change' }
                    ],
                    expected_time: [
                        { required: true, message: '必填',trigger: 'change' }
                    ],
                    contact_time: [
                        { required: true,message: '必填', trigger: 'change' }
                    ],
                    phrase: [
                        { required: true,message: '必填', trigger: 'blur' }
                    ],
                },
                type:[],
                options: [
                    {
                        label: '10萬以下'
                    },
                    {
                        label: '10萬~20萬'
                    }, {
                        label: '20萬~50萬'
                    }, {
                        label: '50萬~100萬'
                    }, {
                        label: '100萬以上'
                    }
                ],
                imgUrl1:"/webroot/session.php",
                loca:""
            }
        },
        mounted() {
            this.getBrandCategory()
        },
        methods: {
            changeType() {
                if(this.loca ==='0'){
                    this.ruleForm.location = "尚未確定";
                }else{
                    this.ruleForm.location = "";
                }
            },
            submitForm(formName) {
              let obj={}
              if(this.isDetail){
                obj=[
                  {
                    name:"name",
                    text:"請輸入姓名!"
                  },
                  {
                    name:"m_phone",
                    text:"請輸入手機!"
                  },
                  {
                    name:"location",
                    text:"請選擇地點!"
                  },
                  {
                    name:"Shop_property",
                    text:"請選擇店面!"
                  },
                  {
                    name:"budget",
                    text:"請輸入創業總預算!"
                  },
                  {
                    name:"expected_time",
                    text:"請選擇希望開店時間!"
                  },
                  {
                    name:"contact_time",
                    text:"請選擇可聯絡時間!"
                  }
                ]
              }else{
                obj=[
                  {
                    name:"brand_category_id",
                    text:"請選擇尋找類型!"
                  },
                  {
                    name:"name",
                    text:"請輸入姓名!"
                  },
                  {
                    name:"m_phone",
                    text:"請輸入手機!"
                  },
                  {
                    name:"location",
                    text:"請選擇地點!"
                  },
                  {
                    name:"Shop_property",
                    text:"請選擇店面!"
                  },
                  {
                    name:"budget",
                    text:"請輸入創業總預算!"
                  },
                  {
                    name:"expected_time",
                    text:"請選擇希望開店時間!"
                  },
                  {
                    name:"contact_time",
                    text:"請選擇可聯絡時間!"
                  }
                ]
              }
                let temp = {};
                for(let i=0;i<obj.length;i++){
                    let tmp = obj[i];
                    if(typeof this.ruleForm[tmp.name]==='object'){
                        if(this.ruleForm[tmp.name].length<=0){
                            temp = tmp;
                            this.$alert(temp.text, '提示', {
                                confirmButtonText: '确定',
                            });
                            return false
                        }
                    }else if(typeof this.ruleForm[tmp.name]==='boolean'){
                        if(this.ruleForm[tmp.name]===false){
                            temp = tmp;
                            this.$alert(temp.text, '提示', {
                                confirmButtonText: '确定',
                            });
                            return false
                        }
                    }else{
                        if(this.ruleForm[tmp.name]===""){
                            temp = tmp;
                            this.$alert(temp.text, '提示', {
                                confirmButtonText: '确定',
                            });
                            return false
                        }
                    }
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.sendData()
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });
            },
            refresh() {
                this.imgUrl1="/webroot/session.php?"+new Date().getTime()
            },
            sendData() {
                let data = Object.assign({},this.ruleForm);
                data.brand_category_id = data.brand_category_id.join(",");
                data.brand_id = this.brand_id
                this.$http({
                    method:"post",
                    url:this.API.apply_fran,
                    data:qs.stringify(data),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    withCredentials:true
                }).then((res) => {
                    this.refresh()
                if(res.data[0].code==="101"){
                    this.resetForm("ruleForm");
                  this.$alert(this.formTips, '成功', {
                    confirmButtonText: '确定',
                  });
                }else{
                  this.$alert(res.data[1].desc, '提示', {
                    confirmButtonText: '确定',
                  });
                }
            })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getBrandCategory() {
                this.$http.post(this.API.get_brand_category).then((res) => {
                    let $this = this;
                if(res.status ===200 && res.data.length>0){
                    this.type = res.data;
                }
            })
            },
        }
    }
</script>

<style scoped lang="less">
    @import "../style/base";
    .title{
        height: 48px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 4px solid #2e436d;
        margin-bottom: 15px;
        .title-left{
            padding:  0 18px;
            height: 48px;
            line-height: 48px;
            font-size: 24px;
            background-color:#2e436d;
            color: #ffffff;
        }
    }

</style>